<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            touch-action: none;
        }
        
        .petal {
            position: absolute;
            width: 20px;
            height: 20px;
            background: transparent;
            pointer-events: none;
            animation: fall linear infinite;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
            }
        }

        .heart {
            position: absolute;
            color: #ff4081;
            font-size: 24px;
            animation: heartAnim 1s ease-out;
        }

        @keyframes heartAnim {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script>
        // 创建花瓣
        function createPetal() {
            const petal = document.createElement('div');
            petal.className = 'petal';
            
            // 随机属性
            const left = Math.random() * 100;
            const duration = 3 + Math.random() * 5;
            const delay = Math.random() * 5;
            const colors = ['#FF69B4', '#FF1493', '#FF00FF', '#FFB6C1', '#FFA07A'];
            
            // 创建花瓣图片（使用Emoji代替）
            petal.innerHTML = ['🌸', '💮', '🏵️', '🌺', '🌻'][Math.floor(Math.random()*5)];
            petal.style.left = left + 'vw';
            petal.style.animationDuration = duration + 's';
            petal.style.animationDelay = -delay + 's';
            petal.style.color = colors[Math.floor(Math.random()*colors.length)];
            petal.style.fontSize = (20 + Math.random()*20) + 'px';

            document.body.appendChild(petal);

            // 移除过期花瓣
            setTimeout(() => petal.remove(), (duration + delay) * 1000);
        }

        // 创建爱心
        function createHeart(x, y) {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.style.left = x + 'px';
            heart.style.top = y + 'px';
            heart.innerHTML = '❤️';
            document.body.appendChild(heart);
            setTimeout(() => heart.remove(), 1000);
        }

        // 初始化
        setInterval(createPetal, 300);
        
        // 点击屏幕出现爱心
        document.addEventListener('click', (e) => {
            createHeart(e.clientX - 15, e.clientY - 15);
        });

        // 自动清理（保持最多50个花瓣）
        setInterval(() => {
            const petals = document.querySelectorAll('.petal');
            if(petals.length > 50) {
                petals[0].remove();
            }
        }, 1000);
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <!-- 新增移动端适配标签 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 新增iOS点击延迟优化 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
        /* 新增手机端触控反馈 */
        body {
            -webkit-tap-highlight-color: transparent;
        }
    </style>
    <!-- 原样式保留 -->
</head>
<!-- 原body内容保留 -->